<template>
  <div class="Newbankcard">
    <div class="header">
      <div class="hackhome"></div>
      <!-- 银行卡账号 -->
      <div class="table">
        <div class="tuo">
          <div class="tuo-1">
            <div class="tuo-2"></div>
            <span>银行卡账号</span>
          </div>
          <div>
            <el-button
              @click="addMethod"
              size="mini"
              style="
                width: 64px;
                font-size: 10px;
                color: #fff;
                height: 30px;
                background-color: #f6b23e;
              "
              >新增</el-button
            >
          </div>
        </div>
        <!-- 银行卡列表 -->
        <el-table
          border
          :data="tabelList"
          size="mini"
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          style="width: 100%"
        >
          <el-table-column prop="bankId" label="银行id"> </el-table-column>
          <el-table-column prop="bankName" label="银行名称"> </el-table-column>
          <el-table-column prop="cardNumber" label="卡号"> </el-table-column>

          <el-table-column prop="cardType" label="卡类型" width="110">
            <template slot-scope="scope">
              <span v-if="scope.row.cardType == 'debitcard'">储蓄卡</span>
              <span v-if="scope.row.cardType == 'creditcard'">信用卡</span>
            </template>
          </el-table-column>

          <el-table-column prop="reservePhone" label="预留手机号">
          </el-table-column>
          <el-table-column prop="CVV2" label="信用卡安全码"> </el-table-column>
          <el-table-column prop="creditFailureDate" label="信用卡失效时间">
          </el-table-column>
          <el-table-column prop="cardholder" label="持卡人名称">
          </el-table-column>
          <el-table-column prop="userType" label="证件类型" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.userType == 'ZGJMSFZ'">身份证</span>
              <span v-if="scope.row.userType == 'HZ'">护照</span>
              <span v-if="scope.row.userType == 'MILITARY'">军人证</span>
              <span v-if="scope.row.userType == 'GATJMJZZ'"
                >港澳台居民来往内地通行证</span
              >
              <span v-if="scope.row.userType == 'WGRYJJLSFZ'"
                >外国人永久居留身份证</span
              >
              <span v-if="scope.row.userType == 'GAJMLWNDTXZ'">港澳通行证</span>
              <span v-if="scope.row.userType == 'TWJMLWDLTXZ'"
                >台湾居民来往大陆通行证</span
              >
              <span v-if="scope.row.userType == 'HKB'">户口本</span>
              <span v-if="scope.row.userType == 'BIRTH'">出生证明</span>
            </template>
          </el-table-column>
          <el-table-column prop="userCertificate" label="持卡人证件号">
            <template slot-scope="scope">{{
              scope.row.userCertificate
                ? scope.row.userCertificate.replace(
                    /^(.{6})(?:\w+)(.{4})$/,
                    "\$1********\$2"
                  )
                : ""
            }}</template></el-table-column
          >
          <el-table-column prop="name" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                style="background-color: #6090ec; color: #fff"
                size="mini"
                @click="editMethod(scope.row)"
                >修改</el-button
              >
              <el-button
                @click="delMethod(scope.row)"
                style="background-color: #ff0000; color: #fff"
                size="mini"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增银行卡 -->
      <el-dialog
        title="银行卡账户"
        :visible.sync="addDialogVisible"
        :close-on-click-modal="false"
        width="30%"
        center
      >
        <el-form
          size="mini"
          :inline="true"
          ref="fromData"
          :model="fromData"
          :rules="fromDataRules"
          class="bandCard"
        >
          <el-form-item label="卡类型" prop="cardType">
            <el-select
              v-model="fromData.cardType"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in cardTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="卡号" prop="cardNumber">
            <el-input
              placeholder="请输入卡号"
              @blur="elInputBlur"
              v-model.trim="fromData.cardNumber"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行名称">
            <el-input
              v-model="fromData.bankName"
              size="mini"
              @input="inpChange($event)"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="请选择有效期"
            v-if="fromData.cardType == 'creditcard'"
            prop="creditFailureDate"
          >
            <el-date-picker
              size="mini"
              v-model="fromData.creditFailureDate"
              placeholder="选择月"
              type="month" value-format="yyyy-MM"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="请输入CVV2"
            prop="CVV2"
            v-if="fromData.cardType == 'creditcard'"
          >
            <el-input
              placeholder="请输入CVV2"
              v-model.trim="fromData.CVV2"
              size="mini"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="预留手机号" prop="reservePhone">
            <el-input
              placeholder="请输入手机号"
              v-model.trim="fromData.reservePhone"
              size="mini"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="持卡人姓名" prop="cardholder">
            <el-input
              placeholder="请输入持卡人姓名"
              v-model="fromData.cardholder"
              size="mini"
            ></el-input>
          </el-form-item>
          <el-form-item label="请选择证件类型" prop="userType">
            <el-select
              v-model="fromData.userType"
              placeholder="请选择证件类型"
              size="mini"
              clearable
            >
              <el-option
                v-for="item in zhengjian"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入证件号" prop="userCertificate">
            <el-input
              placeholder="请输入证件号"
              v-model="fromData.userCertificate"
              size="mini"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="submitForm('fromData')" type="primary"
            >确定</el-button
          >
          <el-button @click="addDialogVisible = false" type="primary"
            >取消</el-button
          >
        </span>
      </el-dialog>

      <!-- 修改银行卡 -->
      <!-- <el-dialog title="会员信息查询-修改银行卡" :visible.sync="Modify" :close-on-click-modal="false" width="30%">
        <div class="too-1-1">
          <div class="too"></div>
          <span>修改银行卡账户</span>
        </div>

        <el-form size="mini" :inline="true" :model="way" ref="way" :rules="editrules" class="bandCard">
          <el-form-item label="请选择卡类型" prop="cardType">
            <el-select v-model="way.cardType" placeholder="请选择" size="mini" clearable>
              <el-option v-for="item in leixing" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入卡号" prop="documentsType">
            <el-input placeholder="请输入卡号" style="width: 220px" v-model="way.cardNumber" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="请选择有效期" prop="documentsType" v-if="way.cardType=='creditcard'">
            <el-date-picker size="mini" v-model="way.creditCardTime" type="date" placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="请输入CVV2" prop="CVV2" v-if="way.cardType=='creditcard'">
            <el-input placeholder="请输入CVV2" v-model="way.CVV2" size="mini">
            </el-input>
          </el-form-item>
          <el-form-item label="预留手机号" prop="obligatePhone">
            <el-input placeholder="预留手机号" style="width: 220px" v-model="way.obligatePhone" size="mini">
            </el-input>
          </el-form-item>
          <el-form-item label="持卡人姓名" prop="cardholder">
            <el-input placeholder="请输入持卡人姓名" style="width: 220px" v-model="way.cardholder" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="请选择证件类型" >
            <el-select v-model="way.documentsType" placeholder="请选择" size="mini" clearable>
              <el-option v-for="item in zhengjian" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入证件号" >
            <el-input placeholder="请输入卡号" style="width: 220px" v-model="way.documentsPhone" size="mini"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getbackUpdateBankCard" size="mini" type="primary">确定</el-button>
            <el-button @click="Modify=false" type="primary">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog> -->
      <el-dialog
        title="确认删除该银行卡吗"
        :visible.sync="delDeleteBankCard"
        :close-on-click-modal="false"
        width="30%"
      >
        <el-button
          @click="delUsrBackCard"
          size="mini"
          style="color: #fff; background-color: #f6b23e"
          >确定
        </el-button>
        <el-button @click="delDeleteBankCard = false" size="mini" type="primary"
          >取消
        </el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "Newbankcard",
  // 父子传递参数
  props: ["MembershipInformationData"],
  data() {
    return {
      // 用户id
      userId: "",
      // 列表数据
      tabelList: [],

      // 新增银行卡数据
      fromData: {
        id: "",
        bankId: "",
        bankName: "",
        cardNumber: "",
        cardType: "",
        reservePhone: "",
        CVV2: "",
        creditFailureDate: "",
        userType: "",
        userCertificate: "",
        cardholder: "",
      },
      // 新增弹窗现实
      addDialogVisible: false,
      // 删除弹窗
      delDeleteBankCard: false,
      // 卡类型
      cardTypeList: [
        {
          label: "信用卡",
          value: "creditcard",
        },
        {
          label: "储蓄卡",
          value: "debitcard",
        },
      ],

      // 修改银行卡校验
      fromDataRules: {
        cardNumber: [
          {
            required: true,
            message: "请输入卡号",
            trigger: "blur",
          },
        ],
        cardType: [
          {
            required: true,
            message: "请选择卡类型",
            trigger: "change",
          },
        ],
        creditFailureDate: [
          {
            required: true,
            message: "请选择有效期",
            trigger: "change",
          },
        ],
        reservePhone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        cardholder: [
          {
            required: true,
            message: "请输入持卡人姓名",
            trigger: "blur",
          },
        ],
        userType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        userCertificate: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "blur",
          },
        ],
        CVV2: [
          {
            required: true,
            message: "请输入CVV2",
            trigger: "blur",
          },
        ],
      },
      // 证件类型
      zhengjian: [
        {
          value: "ZGJMSFZ",
          label: "身份证",
        },
        {
          value: "MILITARY",
          label: "军人证",
        },
        {
          value: "HZ ",
          label: "护照",
        },
        {
          value: "GAJMLWNDTXZ",
          label: "港澳居民来往内地通行证",
        },
        {
          value: "TWJMLWDLTXZ ",
          label: "台湾居民来往大陆通行证",
        },

        {
          value: "WGRYJJLSFZ",
          label: "外国人永久居留身份证",
        },

        {
          value: "HKB",
          label: "户口本",
        },
        {
          value: "BIRTH",
          label: "出生证明",
        },
        {
          value: "OTHER",
          label: "其他证件",
        },
      ],

      bankCardIdList: "",

      card: [],

      // 新增银行卡校验
      addrules: {
        cardNumber: [
          {
            required: true,
            message: "请输入卡号",
            trigger: "change",
          },
        ],
        cardType: [
          {
            required: true,
            message: "请选择卡类型",
            trigger: "change",
          },
        ],
        creditCardTime: [
          {
            required: true,
            message: "请选择有效期",
            trigger: "change",
          },
        ],
        obligatePhone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "change",
          },
        ],
        cardholder: [
          {
            required: true,
            message: "请输入持卡人姓名",
            trigger: "change",
          },
        ],
        documentsType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        documentsPhone: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "change",
          },
        ],
        CVV2: [
          {
            required: true,
            message: "请输入证件号",
            trigger: "change",
          },
        ],
      },

      // 银行卡新增
      Bankcard: false,
      Deletep: false,
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        checked: true,
      },
      radio: 3,
      value: "",
      Modify: false,
      checked: false,
      sizeForm: {
        name: "",
        region: "",
      },
    };
  },
  methods: {
    // 列表
    getUsrBackCardList() {
      this.$axios
        .getUsrBackCardList({
          userId: this.userId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.tabelList = res.data;
          }
        });
    },

    // 新增银行卡
    getaddUsrBackCard() {
      this.$axios
        .getaddUsrBackCard({
          userId: this.userId,
          bankId: this.fromData.bankId,
          bankName: this.fromData.bankName,
          cardNumber: this.fromData.cardNumber,
          cardType: this.fromData.cardType,
          reservePhone: this.fromData.reservePhone,
          CVV2: this.fromData.CVV2,
          creditFailureDate: this.fromData.creditFailureDate,
          userType: this.fromData.userType,
          userCertificate: this.fromData.userCertificate,
          cardholder: this.fromData.cardholder,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.getUsrBackCardList();
            this.addDialogVisible = !this.addDialogVisible;
          }
        });
    },
    // 修改银行卡
    getupdUsrBackCard() {
      this.$axios
        .getupdUsrBackCard({
          id: this.fromData.id,
          bankId: this.fromData.bankId,
          bankName: this.fromData.bankName,
          cardNumber: this.fromData.cardNumber,
          cardType: this.fromData.cardType,
          reservePhone: this.fromData.reservePhone,
          CVV2: this.fromData.CVV2,
          creditFailureDate: this.fromData.creditFailureDate,
          userType: this.fromData.userType,
          userCertificate: this.fromData.userCertificate,
          cardholder: this.fromData.cardholder,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getUsrBackCardList();
            this.addDialogVisible = !this.addDialogVisible;
          }
        });
    },

    // 修改银行卡
    getupdUsrBackCard() {
      this.$axios
        .getupdUsrBackCard({
          id: this.fromData.id,
          bankId: this.fromData.bankId,
          bankName: this.fromData.bankName,
          cardNumber: this.fromData.cardNumber,
          cardType: this.fromData.cardType,
          reservePhone: this.fromData.reservePhone,
          CVV2: this.fromData.CVV2,
          creditFailureDate: this.fromData.creditFailureDate,
          userType: this.fromData.userType,
          userCertificate: this.fromData.userCertificate,
          cardholder: this.fromData.cardholder,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getUsrBackCardList();
            this.addDialogVisible = !this.addDialogVisible;
          }
        });
    },
    // 删除银行卡
    delUsrBackCard() {
      this.$axios
        .delUsrBackCard({
          id: this.fromData.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getUsrBackCardList();
            this.delDeleteBankCard = !this.delDeleteBankCard;
          } else {
            this.$message({
              message: "删除失败",
              type: "error",
            });
          }
        });
    },

    // 新增按钮
    addMethod() {
      this.fromData = {};
      this.fromData.id = "";
      this.fromData.bankName = "";
      this.fromData.bankId = "";
      this.addDialogVisible = !this.addDialogVisible;
    },

    //删除银行卡
    delMethod(row) {
      this.fromData.id = row.id;
      this.delDeleteBankCard = !this.delDeleteBankCard;
    },

    // 修改按钮
    editMethod(row) {
      this.fromData.id = row.id;
      this.$axios
        .getUsrBackCardInfo({
          id: this.fromData.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.fromData.bankId = res.data.bankId;
            this.fromData.bankName = res.data.bankName;
            this.fromData.cardNumber = res.data.cardNumber;
            this.fromData.cardType = res.data.cardType;
            this.fromData.reservePhone = res.data.reservePhone;
            this.fromData.CVV2 = res.data.CVV2;
            this.fromData.creditFailureDate = res.data.creditFailureDate;
            this.fromData.userType = res.data.userType;
            this.fromData.userCertificate = res.data.userCertificate;
            this.fromData.cardholder = res.data.cardholder;
            this.addDialogVisible = !this.addDialogVisible;
          }
        });
    },

    // 卡号输入框失去焦点事件
    elInputBlur(row) {
      if (
        this.fromData.cardNumber.length == 16 ||
        this.fromData.cardNumber.length == 17 ||
        this.fromData.cardNumber.length == 19
      ) {
         this.$axios
        .getBankCardById({
          cardNumber: this.fromData.cardNumber,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.fromData.bankName = res.data.bankName;
            this.fromData.bankId = res.data.id;
            this.inpChange();
          }
        });

      console.log(this.fromData);
      }

     
    },
    // input强制刷新
    inpChange(e) {
      this.$forceUpdate();
    },
    // 确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.fromData.id == "") {
            this.getaddUsrBackCard();
          } else {
            this.getupdUsrBackCard();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    this.userId = this.$route.params.customerId;
    this.getUsrBackCardList();
  },
};
</script>
<style scoped>
.Newbankcard {
  height: 100vh;
  background-color: #f7f7f7;
}

.tuo {
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
  line-height: 57px;
}

.bandCard {
  margin: 20px 0 0px 20px;
}

.tuo-1 {
  display: flex;
  align-items: center;
}

.tuo-2 {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-right: 4px;
  font-size: 12px;
}

.too-1-1 {
  display: flex;
  font-size: 20px;
  align-items: center;
}

.too {
  width: 3.5px;
  height: 22px;
  background-color: #4b71bf;
  margin-right: 4px;
}

/* 下划线 */
.hackhome {
  border-top: 1px solid #e0e0e0;
  width: 98%;
  margin-left: 20px;
  margin-bottom: 30px;
}

.botton {
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  min-width: 880px;
}

.table {
  margin-left: 20px;
  margin-right: 20px;
}

.add {
  width: 500px;
  height: 350px;
  background-color: #fff;
  margin-left: 500px;
  border: 1px solid #c4c4c4;
}

#selectForm >>> .el-form-item__label {
  font-size: 11px;
}
</style>